<template>
  <div class="main-blog">
    <div
      class="article-detail"
      v-for="art in props.list"
      :key="art.id"
      :style="`background-image: url(${art.article_cover})`"
      @click="toArticalDetail(art)"
    >
      <div class="article-detail-right">
        <el-tooltip
          effect="dark"
          :content=art.article_title
          placement="top-start"
        >
          <h1>{{ art.article_title }}</h1>
        </el-tooltip>
        <div>
          <span
            ><el-icon color="#05b5fa"><Edit /></el-icon>&nbsp;发表于:&nbsp;{{
              art.createDate
            }}</span
          >
          <span
            ><el-icon color="#05b5fa"><Calendar /></el-icon
            >&nbsp;更新于:&nbsp;{{ art.updateDate }}</span
          >
          <span
            ><el-icon color="#05b5fa"><Grid /></el-icon>&nbsp;分类:&nbsp;{{
              art.categoryName
            }}&nbsp;&nbsp;
            <img
              width="14"
              height="14"
              src="../../assets/svg/tag.svg"
              alt="点赞"
            />
          </span>
          <span>
            <img
              width="14"
              height="14"
              src="../../assets/svg/tag.svg"
              alt="点赞"
            />&nbsp;标签:&nbsp;{{ art.tagNameList }}</span
          >
          <span
            ><img
              width="14"
              height="14"
              src="../../assets/svg/heart.svg"
              alt="点赞"
            />&nbsp;点赞: {{ art.thumbs_up_times }}&nbsp;&nbsp;
            <el-icon color="#05b5fa"><StarFilled /></el-icon>&nbsp;收藏:
            {{ art.star_times }}&nbsp;&nbsp;<el-icon color="#05b5fa"
              ><Comment /></el-icon
            >&nbsp;评论:&nbsp;{{ art.comment_times }}
          </span>
        </div>
        <el-tooltip
          effect="dark"
          :content=art.article_description
          placement="bottom-start"
        >
          <p>{{ art.article_description }}</p>
        </el-tooltip>
      </div>
      <div class="bg-img"></div>
    </div>
  </div>
  <Pagination
    v-if="total && total > size"
    :size="size"
    :current="current"
    :layout="layout"
    :total="props.total"
    @pagination="pagination"
  />
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import Pagination from "@/components/Pagination/index.vue";
import { Article } from "@/interface/blogs";
type ArticleAtHere = Article & { showToolTip: boolean };
const props = defineProps({
  list: {
    type: Array as () => ArticleAtHere[],
    default: () => [],
  },
  total: {
    type: Number,
    default: 0,
  },
  size: {
    type: Number,
    default: 24,
  },
});
const emit = defineEmits(["current"]);
const current = ref<number>(1);
let layout = "prev, pager, next";
const router = useRouter();

const pagination = (page: { current: number; size: number }) => {
  current.value = page.current;
  emit("current", page.current);
};
const toArticalDetail = (article: Article) => {
  router.push({ path: "/blogDetail", query: { id: article.id } });
};
</script>
<style lang="scss" scoped>
.main-blog {
  margin: 0 auto;
  .article-detail {
    height: 10rem;
    position: relative;
    color: #ffffff;
    // margin-top: 10px;
    box-shadow: 5px 5px 5px #f5f6f8;
    border: 2px solid #e8e8e8;
    border-radius: 5px;
    display: flex;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    .article-detail-right {
      width: 100%;
      position: relative;
      height: inherit;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 0.5rem;
      z-index: 10;
      span {
        font-weight: 400;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
      }
      h1 {
        height: 2rem;
        font-size: 1.2rem;
        font-weight: 800;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 14rem;
      }
      p {
        height: 1.5rem;
        font-size: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 14rem;
      }
    }
    .bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      background-color: rgba(0, 0, 0, 0.5); // 设置半透明黑色覆盖层
      z-index: 0;
    }
  }
  .article-detail:hover {
    border: 1px solid $blue;
    filter: brightness(1.1);
    color: $blue;
  }
}
.pointer {
  cursor: pointer;
  p {
    font-weight: 300;
  }
  span {
    font-weight: 900;
  }
}
@media screen and (min-width: 550px) and (max-width: 850px) {
  .main-blog {
    max-width: 1080px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 16px;
    column-gap: 20px;
  }
}
@media screen and (min-width: 850px) and (max-width: 1080px) {
  .main-blog {
    max-width: 1080px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 16px;
    column-gap: 20px;
  }
}

@media screen and (min-width: 1080px) {
  .main-blog {
    max-width: 1080px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 16px;
    column-gap: 20px;
  }
}
</style>
